/*

This is a custom SCSS stylesheet for the Twitter application. First we include the Sencha Touch SCSS, commenting out
the parts we don't need (e.g. tabs, pickers, carousel etc). After that we simply define our application's CSS using
normal CSS or SCSS syntax.

To compile this stylesheet, we just open up a terminal window, cd to twitter/resources/scss (the location of this file)
and run this command:

    compass compile

This builds an optimized application.css file, placing it in the twitter/resources/css directory.

Note - to run the compass command you must have the Ruby language installed (if you're on OS X you already have it,
if you're on windows it's easy to install - see http://rubyforge.org/frs/?group_id=167). Once you have ruby, open
up a terminal window and type in:

    gem install haml compass compass-colors

After this you can run 'compass compile' as above to compile the stylesheet.

*/


$include-default-icons: false;
$include-default-uis: false;
$base-color: #3E7AAD;
$list_active_color: lighten($base-color, 10%);

@import 'sencha-touch/default/all';

@include sencha-panel;
@include sencha-buttons;
//@include sencha-sheet;
//@include sencha-picker;
//@include sencha-tabs;
@include sencha-toolbar;
@include sencha-toolbar-forms;
//@include sencha-carousel;
//@include sencha-indexbar;
@include sencha-list;
@include sencha-list-paging;
@include sencha-list-pullrefresh;
@include sencha-layout;
//@include sencha-form;
//@include sencha-msgbox;
@include sencha-loading-spinner;

@include sencha-toolbar-ui('dark', darken($base-color, 15%));

.x-item-selected {
    color: #fff !important;
}

body {
    background-color: #ccc;
}

.navigation {
    width: 250px;
    border-right: 1px solid #444;
}

.search-item {
  width: 100%;
  
  .action {
      opacity: 0;
  }

  .delete {
      float: right;
      color: #fff;
      font-size: 0.7em;
      padding: 5px 8px;
      border-color: #555;
      @include background-gradient($alert-color, 'glossy');
  }
  
}


.search-item-active .search-item .action {
    opacity: 1;
    -webkit-transition: opacity 0.3s linear;
}

.navigation .x-panel-body {
    border-bottom: 1px solid rgba(0, 0, 0, 0.35);
    background: #eee;

    .x-button {
      border-top: 1px solid rgba(255, 255, 255, 0.4);
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      @include border-radius(0);
      padding: 0 8px;
      background: #eee;
      height: 48px;

      span {
        line-height: 45px;
        color: #444;
        text-shadow: #fff 0 1px 0;
      }

      &.x-button-pressed {
        color: #000;
        background-color: #fff;
      }
    }
}

.navigation .x-panel-body .x-button-active {
    color: #2A5BC2;
}

.navigation.x-floating .x-panel-body {
    border-bottom: 0px;
}

.navigation .x-panel-body .x-button img,
.navigation .x-button.x-docked img {
    width: 28px;
    margin-right: 8px;
    height: 40px;
}

.searches {
    border-right: 1px solid #000;
}

.timeline .tweet {
    border: none;

    .x-list-item-body {
        @include display-box;
        @include box-orient(horizontal);
        overflow: hidden;
    }

    img {
        padding: 2px;
        width: 60px;
        height: 60px;
        background-color: #fff;
    }

    .tweet-bubble {
        position: relative;
        min-height: 100px;
        margin-left: 15px;
        overflow: hidden;
        @include border-radius(6px);
        background: #eee;
        @include box-flex(1);
    }

    .x-tweetanchor {
        width: 14px;
        height: 14px;
        background-color: #eee;
        top: 20px;
        left: 82px;
        position: absolute;
        -webkit-transform: rotate(45deg);
    }

    &.tweet-active .x-tweetanchor {
        background-color: #111;
    }

    .tweet-content {
        padding: 15px;
        color: #444;
    }

    .tweet-content a {
        color: #2578C1;
    }

    .tweet-content h2 {
        font-weight: bold;
        color: #111;
    }
}

.no-searches {
    padding: 20px;
    text-align: center;
    color: #555;
}


.timeline .x-toolbar-actions {
    background-color: #111;
    z-index: 0;
    border: 1px solid #444;
}

.timeline .x-toolbar-actions .x-button {
    height: 100px;
    width: 100px;
    border-right: 1px solid #fff;
}

.timeline .x-toolbar-actions .x-button img {
    width: 100px;
    height: 100px;
}

.nextPage p {
    padding: 15px 20px;
    margin-bottom: 25px;
    text-align: center;
    color: #555;
}

.nextPage p.loading {
    display: none;
}

.nextPage.x-loading {
    p.load {
        display: none;
    }

    p.loading {
        display: block;
    }
}

.x-example {
    background-repeat: no-repeat;
    background-position: center center;
}
.x-example-list {
    background-image: url(favorites/list.png);
}

.posted {
    display: none;
}

.twitter-search-bar .x-button.x-view-selected {
    background-color: #eee;
}

.x-toolbar {
    padding: 1px;
    height: 1.8em;
}
.x-toolbar .x-input-search {
    width: 100%;
    font-size: 1.2em;
}

/* Manually disable background as we're not doing anything on tap */

.x-list .x-list-item.x-item-pressed {
  background: none transparent;
}
